<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 31401
  Date: 2024/6/24
  Time: 16:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>购物车</title>
    <script type="text/javascript" src="js/jquery-3.7.1.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js" ></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            background-color: #f4f4f4;
            padding-bottom: 150px; /* 根据 footer 的高度调整 */
        }

        .container1 {
            width: 80%;
            margin: 20px auto;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 150px; /* 增加底部外边距，确保 footer 不被遮挡 */
        }

        /* 表格样式 */
        .table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }

        .table thead {
            background-color: sandybrown;
            opacity: 0.8;
            color: #fff;
        }

        .table th,
        .table td {
            padding: 10px;
            text-align: left;
            border: 1px solid #ddd;
        }

        .table img {
            width: 50px;
            height: auto;
        }

        /* 按钮样式 */
        .btn {
            padding: 8px 15px;
            margin: 2px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            outline: none;
        }

        .btn-warning {
            background-color: #f0ad4e;
            color: white;
            text-decoration: none;
        }

        .btn-info {
            background-color: #5bc0de;
            color: white;
            text-decoration: none;
        }

        .btn-danger {
            background-color: #d9534f;
            color: white;
            text-decoration: none;
        }
        /* 购物车操作结果提示 */
        #addcart, #lessen, #deletes {
            margin-top: 10px;
            display: inline-block;
            padding: 5px 10px;
            border-radius: 4px;
        }
        /* 响应式设计 */
        @media (max-width: 768px) {
            .container1 {
                width: 95%;
            }

            .table {
                font-size: 14px;
            }
        }
        .submit{
            color: #000; /* 链接颜色设为黑色 */
            background-color: sandybrown;
            opacity: 0.8;
            text-decoration: none; /* 去除下划线 */
            padding: 5px 10px; /* 内边距 */
            display: inline-block; /* 作为内联块级元素显示，以便应用内边距和背景色等 */
            border-radius: 5px; /* 圆角 */
            transition: background-color 0.3s ease; /* 背景色过渡效果 */
        }
        .submit:hover{
            background-color: sandybrown; /* 鼠标悬停时背景色变为浅灰色 */
        }
    </style>
</head>
<body>
<jsp:include page="indexHeader.jsp"></jsp:include>
<div class="container1">
<table class="table">
    <thead>
    <tr>
        <th scope="col">编号</th>
        <th scope="col">商品名称</th>
        <th scope="col">商品图片</th>
        <th scope="col">商品价格</th>
        <th scope="col">商品数量</th>
    </tr>
    </thead>
    <tbody>
    <c:forEach items="${sessionScope.order.listmap}" var="item" varStatus="status">
        <tr>
            <td>${status.count}</td>
            <td scope="row">${item.value.goods.goodsName}</td>
            <td><img src=".${item.value.goods.coverImg}" height="50px" alt=""></td>
            <td>${item.value.price}</td>
            <td>
                <a class="btn btn-warning" href="javascript:lesson(${item.key})">减少</a>
                <span style="...">${item.value.amount}</span>
                <a class="btn btn-info" href="javascript:addcart(${item.key});">增加</a>
                <a class="btn btn-danger" href="javascript:deletes(${item.key});">删除</a>
            </td>
        </tr>
    </c:forEach>
    <tr>
        <td colspan="2" style="">总共 ${sessionScope.order.total}</td>
        <td><a class="submit" href="order_submit.jsp">提交订单</a>
            ${addOrderinfo}</td>
    </tr>
    </tbody>

</table>
</div>
<jsp:include page="indexFooter.jsp"></jsp:include>
<script>
    function addcart(goodsId) {
        var goodsid = goodsId;
        var addnum = 1;
        $.post("addGoodsCartServlet", {goodsid: goodsid, addnum: addnum}, function (addn) {
            console.log(addn)
            if (addn.code == 201) {
                location.reload();
            }
        }, "json")
    }
    function lesson(goodsId) {
        var goodsid = goodsId;
        $.post("lessonGoodsCartServlet", {goodsid: goodsid }, function (less) {
            console.log(less)
            if (less.code == 202) {
                location.reload();
            }
        }, "json")
    }
    function deletes(goodsId) {
        var goodsid = goodsId;
        $.post("deleteGoodsCartServlet", {goodsid: goodsid}, function (dele) {
            console.log(dele)
            if (dele.code == 203) {
                location.reload();
            }
        }, "json")
    }
</script>
</body>
</html>
